<template>
	<view>
		<!-- <view class="header" v-bind:class="{'status':isH5Plus}">
			<view class="userinfo">
				<view class="face"><image :src="user.avatar||userinfo.face"></image></view>
				<view class="info">
					<view class="username">{{user.username}}</view>
					<view class="integral">ID:{{user.id}}</view>
				</view>
			</view>
			<view class="setting" @tap="toPage('setting')"><image src="../../static/my/setting.png"></image></view>
		</view> -->
		<!-- <view class="orders">
			<view class="box">
				<view class="label" v-for="(row,index) in orderTypeLise" :key="row.name" hover-class="hover"  @tap="toPage(row.path)">
					<view class="icon"><view class="badge" v-if="row.badge>0">{{row.badge}}</view><image :src="'../../static/my/'+row.icon"></image></view>
					{{row.name}}
				</view>
			</view>
		</view>  -->
		<view class="list" v-for="(list,list_i) in severList" :key="list_i">
			<view class="li" v-for="(li,li_i) in list" @tap="toPage(li.path)" v-bind:class="{'noborder':li_i==list.length-1}"  hover-class="hover" :key="li.name" >
				<view class="icon"><image :src="'../../static/my/'+li.icon"></image></view>
				<view class="text">{{li.name}}</view>
				<image class="to" src="../../static/my/to.png"></image>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState, 
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				//#ifdef APP-PLUS
				isH5Plus:true,
				//#endif
				//#ifndef APP-PLUS
				isH5Plus:false,
				//#endif
				userinfo:{},
				orderTypeLise:[
					{path:"coin",name:'金币',icon:'momey.png',badge:0},
					{path:"order",name:'订单',icon:'wawa.png',badge:0},
					{path:"message",name:'消息',icon:'l4.png',badge:0},
					{path:"favor",name:'收藏夹',icon:'renw.png',badge:0},
				],
				severList:[
					
					[
						{path:"order",name:'订单管理',icon:'choujiang.png'},
						{path:"address",name:'地址管理',icon:'addr.png'},
						// {path:"feedback",name:'帮助反馈',icon:'security.png'},
						// {path:"kefu",name:'在线客服',icon:'kefu.png'},
						// {path:"record",name:'设置',icon:'mingxi.png'}
					]
				],
			};
		},
		computed: {
			...mapGetters(["user"])
		},
		onLoad() {
			//加载
			this.init();
		},
		methods: {
			init() {
				//用户信息
				this.userinfo={
					face:'../../static/my/9.png',
					username:"tongaogu",
					integral:"1435"
				}		
			},
			//用户点击列表项
			toPage(path){
				// uni.showToast({title: this.severList[list_i][li_i].name});
				uni.navigateTo({
					url: '/pages/my/'+path
				})
			}
		}
	}
</script>

<style lang="scss">
page{background-color:#fff}
.header{
	&.status{padding-top:var(--status-bar-height);}
	background-color:#FF80AB;width:92%;height:30vw;padding:0 4%;display:flex;align-items:center;
	.userinfo{
		width:90%;display:flex;
		.face{flex-shrink:0;width:15vw;height:15vw;
			image{width:100%;height:100%;border-radius:100%}
		}
		.info{
			display:flex;flex-flow:wrap;padding-left:30upx;
			.username{width:100%;color:#fff;font-size:40upx}
			.integral{display:flex;align-items:center;padding:0 20upx;height:40upx;color:#fff;background-color:rgba(0,0,0,0.1);border-radius:20upx;font-size:24upx}
		}
	}
	.setting{
		flex-shrink:0;width:6vw;height:6vw;
		image{width:100%;height:100%}
	}
}
.hover{background-color:#eee}
.orders{
	background-color:#FF80AB;width:92%;height:11vw;padding:0 4%;margin-bottom:calc(11vw + 40upx);display:flex;align-items:flex-start;border-radius:0 0 100% 100%;margin-top: -1upx;
	.box{
		width:98%;padding:0 1%;height:22vw;background-color:#fefefe;border-radius:24upx;box-shadow:0 0 20upx rgba(0,0,0,0.15);margin-bottom:40upx;display:flex;align-items:center;justify-content:center;
		.label{
			display:flex;align-items:center;justify-content:center;flex-flow:wrap;width:100%;height:16vw;color:#666666;font-size:26upx;
			.icon{
				position:relative;width:7vw;height:7vw;margin:0 1vw;
				.badge{position:absolute;width:4vw;height:4vw;background-color:#FF80AB;top:-1vw;right:-1vw;border-radius:100%;font-size:20upx;color:#fff;display:flex;align-items:center;justify-content:center;z-index: 10;}
				image{width:7vw;height:7vw;z-index: 9;}
			}
		}
	}
}
.list{
	width:100%;
	// border-bottom:solid 26upx #f1f1f1;
	.li{
		width:92%;height:100upx;padding:0 4%;border-bottom:solid 1upx #e7e7e7;display:flex;align-items:center;
		// &.noborder{border-bottom:0}
		.icon{
			flex-shrink:0;width:50upx;height:50upx;
			image{width:50upx;height:50upx}
		}
		.text{padding-left:20upx;width:100%;color:#666}
		.to{flex-shrink:0;width:40upx;height:40upx}
	}
}
</style>
